<template>
  <div>
    <div class="backdrop2 taito">
      <p class="text taito">Taitō</p>
    </div>
    <div class="backdrop2 shibuya">
      <p class="text shibuya">Shibuya</p>
    </div>
    <div class="backdrop2 shinjuku">
      <p class="text shinjuku">Shinjuku</p>
    </div>
    <div class="backdrop2 nilita">
      <p class="text nilita">NiliTa</p>
    </div>
    <div class="backdrop">
      <p class="text multiply">Taitō</p>
    </div>
    <div class="backdrop">
      <p class="text screen">Taitō</p>
    </div>
    <div class="backdrop">
      <p class="text darken">Taitō</p>
    </div>
    <div class="backdrop">
      <p class="text lighten">Taitō</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CssSkill'
}
</script>

<style>
html,
body,
ul,
li,
div,
h3 {
  margin: 0;
  padding: 0;
}
.backdrop {
  background: url('http://www.jiangweishan.com/demo/Melgoza.jpg') center;
  background-size: contain;
  margin: auto;
  margin-top: 40px;
  width: 75vw;
}

.text {
  font: bolder 12vw 'Alfa Slab One';
  text-align: center;
  margin: 0;
  border: 4px solid;
}

.multiply {
  color: white;
  mix-blend-mode: multiply;
  background-color: rgba(59, 2, 6, 1);
}

.screen {
  color: black;
  mix-blend-mode: screen;
  background-color: rgba(244, 220, 211, 1);
}

.darken {
  color: white;
  mix-blend-mode: darken;
  background-color: rgba(59, 2, 6, 1);
}

.lighten {
  color: black;
  mix-blend-mode: lighten;
  background-color: rgba(244, 220, 211, 1);
}
.backdrop2 {
  background-size: contain;
  background-position: center;
  margin: auto;
  margin-top: 40px;
  width: 75vw;
}

.backdrop2.taito {
  background-image: url('http://www.jiangweishan.com/demo/Melgoza.jpg');
}

.backdrop2.shibuya {
  background-image: url('http://www.jiangweishan.com/demo/Knight.jpg');
}
.backdrop2.shinjuku {
  background-image: url('http://www.jiangweishan.com/demo/Hung.jpg');
}
.backdrop2 .text {
  color: white;
  border: 4px white solid;
  mix-blend-mode: multiply;
  font: bolder 12vw monospace;
  text-align: center;
  margin: 0;
  cursor: pointer;
  transition: text-indent 0.5s;
  animation: glow 3s infinite;
}

@keyframes glow {
  0% {
    text-shadow: 0 0 10px white;
  }

  15% {
    text-shadow: 2px 2px 10px rgba(255, 255, 255, 1),
      -2px -2px 10px rgba(255, 255, 255, 1);
  }
  30% {
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.7),
      -2px -2px 4px rgba(255, 255, 255, 0.7);
  }
  50% {
    text-shadow: 2px 2px 15px rgba(255, 255, 255, 0.5),
      -2px -2px 15px rgba(255, 255, 255, 0.5);
  }
}

.backdrop2 .text:hover {
  text-indent: 5px;
  transition: text-indent 0.5s;
}

.backdrop2 .text.taito {
  font-family: 'Alfa Slab One', cursive;
  background-color: rgba(59, 2, 6, 1);
  outline: 4px rgba(59, 2, 6, 1) solid;
}

.backdrop2 .text.shibuya {
  font-family: 'Bungee Shade', cursive;
  background-color: rgba(2, 22, 48, 1);
  outline: 4px rgba(2, 22, 48, 1) solid;
  font-size: 10vw;
}

.backdrop2 .text.shinjuku {
  font-family: 'Jacques Francois Shadow', cursive;
  background-color: rgba(50, 6, 43, 1);
  outline: 4px rgba(50, 6, 43, 1) solid;
}
.backdrop2 .text.nilita {
  font-family: 'Alfa Slab One', cursive;
  background-color: rgba(50, 6, 43, 1);
  outline: 4px rgba(50, 6, 43, 1) solid;
  text-align: center;
  background: url('http://www.jiangweishan.com/demo/Melgoza.jpg') center;
  background-size: contain;
  margin: auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
</style>

